<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
          <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <style>
      body{background-color: #fff}
        #header {  height:50px;background-color: #fc6d4d}
      *{margin: 0; peving: 0;font-family: "MicrosoftYaHei";}
      h1,h2,h3,h4,h5,h6 {font-weight: normal; margin: 0;    }
      input {-webkit-appearance: none;}
  :focus{outline: none}
    .publicitem{padding: 0;padding-top: 14px;width: 100%;box-sizing: border-box}
    .publicitem .shebei{margin-bottom: 5px;border-bottom: 5px solid #f5f5f5;width: 100%;box-sizing: border-box;;padding: 0 14px;padding-bottom:5px;}
    .publicitem .shebei .ti h2{margin-bottom:13px;}
    .publicitem .shebei .ti h2 label{font-size: 14px;color: #333;line-height: 13px;display: inline-block;}
    .publicitem .shebei .te .col{width: 104px;height: 27px;box-sizing: border-box;;border: 1px solid #D3D3D3;color: #666;font-size: 12px;line-height: 27px;text-align: center;margin-left: 9px;float: left;margin-bottom: 10px;position: relative;}
    .publicitem .shebei .te .col input{width:100%;height: 27px;box-sizing: border-box;display:block;opacity: 0;position: absolute;left: 0;top: 0}
    .publicitem .shebei .te .col:nth-child(3n+1){margin-left: 0}
    .publicitem .jingyanyaoqiu .te .col{width:73px}
    .publicitem .jingyanyaoqiu .te .col:nth-child(3n+1){margin-left: 8px}
    .publicitem .jingyanyaoqiu .te .col:first-child{margin-left: 0}
    .input{margin-top: 3px;}
    .input>div{height: 49px;padding: 0 14px;width: 100%;box-sizing: border-box;border-bottom: 1px solid #f5f5f5}
    .input>div h2, .input>div h4{font-size: 13px;line-height: 49px;color: #333;float: left;}
    .input>div h2{font-size: 14px;}
    .input>div .inputri{float: right; width: 70%}
    .input>div h4{display: block;float: none;margin-bottom: 4px;}
    .input>div .inputri h3{display: inline-block;margin: 0 10px;color: #666;font-size: 14px;line-height: 49px;}
    .input>div .inputri span{display: inline-block;;background-color: #f5f5f5;width: 20px;height: 20px;line-height: 20px;text-align: center;vertical-align: middle;font-size:14px;box-sizing: border-box;;padding-top: 3px;}
      .input>div .inputri span img{width:60%;display: block;margin: 0 auto;}
    .input>div .inputri input{color: #666;display: block;box-sizing:border-box;width: 100%;font-size: 14px;height: 49px;line-height: 49px;text-align: right;}
  #dizhi .inputri span{color: #333;display: block;font-size: 14px;height: 49px;line-height: 49px;text-align: right;width: auto;background-color: rgba(0,0,0,0)}
    #xmtype{color: #333;display: block;font-size: 14px;height: 49px;line-height: 49px;text-align: right;width: auto;background-color: rgba(0,0,0,0)}
    .input>div .inputri input::-webkit-input-placeholder {color:#B8B8B8;font-size: 14px;}
    .input>div .inputri input::-moz-placeholder{color:#B8B8B8;font-size: 14px;}
    .input>div .inputri input:-moz-placeholder {color:#B8B8B8;font-size: 14px;}
    .input>div .inputri input:-ms-input-placeholder {color:#B8B8B8;font-size: 14px;}
    .input>div textarea{height: 163px;width: 100%;box-sizing: border-box;color: #333;font-size: 14px;color: #B8B8B8;display: block;margin-top: -10px;}
    .input>div textarea::-webkit-input-placeholder {color:#B8B8B8;font-size: 14px;}
    .input>div textarea::-moz-placeholder{color:#B8B8B8;font-size: 14px;}
    .input>div textarea:-moz-placeholder {color:#B8B8B8;font-size: 14px;}
  .input>div textarea:-ms-input-placeholder {color:#B8B8B8;font-size: 14px;}
    .input>.inputbo{width: 100%;height: auto;border: none}
  .input>div .inputtext{width: 100%;float: none;position: relative;height:163px;}
  #input{width: 100%;padding: 0 14px;box-sizing: border-box;}
 #input input{display: block;width: 100%;text-align: center;;background-color: #fc8622;line-height:40px;height:40px;box-sizing: border-box;color: #fff;font-size: 13px;margin: 30px auto;}
      .clearfix{clear: both;}
    .selected {background-color: #fc8622!important;color: #fff!important;width: 32%!important;height: 27px!important;box-sizing: border-box!important;border:none!important;font-size: 12px!important;line-height: 27px!important;text-align: center!important;float: left!important;margin-bottom: 10px!important;position: relative!important;}
   .selected   input{width:100%!important;height: 27px!important;box-sizing: border-box!important;display:block!important;opacity: 0!important;position: absolute!important;left: 0!important;top: 0!important}
   .selected1 {background-color: #fc8622!important;color: #fff!important;width: 23.5%!important;height: 27px!important;border:none!important;box-sizing: border-box!important;font-size: 12px!important;line-height: 27px!important;text-align: center!important;float: left!important;margin-bottom: 10px!important;position: relative!important;}
  .selected1   input{width:100%!important;height: 27px!important;box-sizing: border-box!important;display:block!important;opacity: 0!important;position: absolute!important;left: 0!important;top: 0!important}
  #shebei input{width:100%;height: 27px;box-sizing: border-box;display:block;opacity: 0;position: absolute;left: 0;top: 0}
   #shebei input{width:100%;height: 27px;box-sizing: border-box;display:block;opacity: 0;position: absolute;left: 0;top: 0}
   #shebei>div{width:32%;height: 27px;box-sizing: border-box;;border: 1px solid #f5f5f5;color: #666;font-size: 12px;line-height: 27px;margin-left: 0;text-align: center;margin-right: 2%;float: left;margin-bottom: 10px;position: relative;}
      #shebei>div:nth-child(3n){margin-right: 0}
  #jingyan input{width:100%;height: 27px;box-sizing: border-box;display:block;opacity: 0;position: absolute;left: 0;top: 0}
  #jingyan>div{width:23.5%;height: 27px;box-sizing: border-box;;border: 1px solid #f5f5f5;color: #666;font-size: 12px;line-height: 27px;margin-left: 0;text-align: center;margin-right:2%;float: left;margin-bottom: 10px;position: relative;}
    #jingyan>div:nth-child(4n){margin-right: 0}
    .none{ display: none}
#counter{font-style:normal;}
.jjtc{position: fixed;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.25);z-index: 1000000;display: none;}
.jjtc .box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;width:250px;height:160px;border-radius: 4px;box-sizing: border-box;;overflow:hidden}
.jjtc .top{;width: 100%;height: 40px;background-image: -webkit-linear-gradient(left, rgb(253,139,59) 0%, rgb(255,106,1) 100%);background-image: -o-linear-gradient(left, rgb(253,139,59) 0%, rgb(255,106,1) 100%);background-image: linear-gradient(to right, rgb(253,139,59) 0%, rgb(255,106,1) 100%);}
.jjtc .top h4{margin-top: 0;text-align: center;color: #fff;font-size: 12px;line-height: 40px;}
.jjtc .box .close{position: absolute;top: 17px;right: 10px;width: 7px;height: 7px;cursor: pointer;}
.jjtc .box .close img{width: 100%;display: block;}
.jjtc .box .tetx{width: 100%;height: 120px;box-sizing: border-box;padding: 25px 24px;}
.jjtc .box .tetx .col{width:100%;height: 30px;box-sizing: border-box;border-radius: 2px;text-align: center;;color: #999;font-size: 12px;line-height: 30px;border: 1px solid #e7e7e7;float: left;margin-bottom: 10px;}
.jjtc .box .tetx .col:nth-child(2n){float: right;}
.jjtc .box button{display: block;margin: 0 auto;width:203px;height: 40px;box-sizing: border-box;color: #fff;font-size: 13px;text-align: center;line-height: 40px;background-color: #fc8622;border-radius: 2px}
.checked{color: #fc8622!important;border-color: #fc8622!important}
.clearfix{clear: both;}
    </style>
  </head>
  <body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;"></span>
        </a>
        <div class="aui-title" style="font-size:14px;">发需求</div>

    </header>
    <section id="publicitem" style="background-color:#fff">
      <div class="publicitem" id="itemshow" >
      <div class="shebei"  >
        <div class="ti" >
          <h2> <label for="">驾驶设备</label></h2>
        </div>
        <div class="te" id="shebei">
          <div class="col  col1" v-for="site in itemshow1" tapmode :title="site.title">
         <input type="radio" value="{{site.name}}" name="{{site.radio}}" >{{site.name}}
          </div>

        <h6 class="clearfix"></h6>
        </div>
      </div>
      <div class="shebei jingyanyaoqiu">
        <div class="ti">
          <h2> <label for="">经验要求</label></h2>
        </div>
        <div class="te"  id="jingyan">
          <div class="col"  v-for="site in itemshow2" tapmode :title="site.title">
    <input type="radio" value="{{site.name}}" name="{{site.radio}}">{{site.name}}
          </div>

    <h6 class="clearfix"></h6>
        </div>
      </div>
      <div class="bar"></div>
      <div class="input">
        <div>
          <h2>标题</h2>
          <div class="inputri">
          <input type="text" id="title" placeholder="填写项目标题">
          </div>
          <div class="clearfix"></div>
        </div>



        <div>
          <h2>工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期</h2>
          <div class="inputri" style="text-align:right">
            <span v-on:click="counter -= 1" ><img src="../../image/jianhao.png" alt=""></span>

            <h3  v-if="counter >= 0"> <i id="counter">{{ counter }}</i> 天</h3>
            <h3 v-else> 0天</h3>
            <span  v-on:click="counter += 1"><img src="../../image/jiahao.png" alt=""></span>
          </div>
          <div class="clearfix"></div>
        </div>
        <div onclick="type()">
          <h2>项目类型</h2>
          <div class="inputri">
        <span id="xmtype"></span>
          </div>
          <div class="clearfix"></div>
        </div>
        <div onclick="dizhi()" id="dizhi">
          <h2>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</h2>
          <div class="inputri" id="dizhi">
              <span id="dizhite">如济南市历下区</span>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="inputbo">
          <h4><label for="" style="font-size:14px;">项目需求</label></h4>
          <div class="inputri inputtext">
            <textarea name="" cols="30" rows="10" id="xuqiu"  placeholder="如济南市历下区"></textarea>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
        <div id="input" onclick="fabu()">
<input type="submit" value="确认发布">
        </div>

      </div>

      <div class="jjtc" id="dj" onclick="disnone()">
        <div class="box">
          <div class="top">
                <h4>项目类型</h4>
          </div>
          <div class="tetx">
            <div class="jjly dj col" onclick="djthis(0)" id="type1">集体项目</div>
            <div class="jjly dj col" onclick="djthis(1)" id="type2">个人项目</div>
            <div class="clearfix"></div>
          </div>

        </div>
      </div>
    </section>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
  apiready = function() {
  ajax();



    var header = $api.byId('header');
  headerH =  $api.fixStatusBar(header);



//事件监听
api.addEventListener({
    name: 'publicitem_win'
}, function(ret, err) {
var  dizhite=$api.byId("dizhite")
$api.text(dizhite, ret.value.didian);
  lon = ret.value.lon;
  lat = ret.value.lat;
});

  };



  function closeWin(){

  api.closeWin({

  });

  api.sendEvent({
  name: 'hsy',
  extra: {
  id:0
  }
  });




  }
var lon,lat;

    var itemshow = new Vue({
               el: '#itemshow',
               data: {
                   itemshow1:   [
                           {id:1 ,name:"小挖(10吨以下)",title:"小挖(10吨以下)",radio:"驾驶设备"},
                           {id:2 ,name:"中挖(10~20吨)",title:"中挖(10~20吨)",radio:"驾驶设备"},
                           {id:3 ,name:"中大挖(20~30吨)",title:"中大挖(20~30吨)",radio:"驾驶设备"},
                            {id:4 ,name:"大挖(30吨以上)",title:"大挖(30吨以上)",radio:"驾驶设备"},
                              {id:4 ,name:"不限",title:"",radio:"驾驶设备"},
                         ],
                         itemshow2:   [
                                 {id:1 ,name:"1年以上",title:"1年以上",radio:"经验要求"},
                                 {id:2 ,name:"3年以上",title:"3年以上",radio:"经验要求"},
                                 {id:3,name:"5年以上",title:"5年以上",radio:"经验要求"},
                                  {id:4 ,name:"经验不限",title:"",radio:"经验要求"},

                               ],
                       counter: 0

               },

               method:{

                   }
             })


             var danxuan = document.getElementById("shebei").getElementsByTagName("div");

                       var length = danxuan.length;

                       for (var i = 0; i < length; i++) {
                           danxuan[i].index = i;
                           danxuan[i].onclick = function() {
                          danxuan[this.index].setAttribute("class","selected");


                               for (var j = 0; j < length; j++) {

                                      danxuan[j].className = "";



                               };

this.className = "selected ";
                           }
                       };
                       var danxuan1 = document.getElementById("jingyan").getElementsByTagName("div");

                                 var length1 = danxuan1.length;

                                 for (var y = 0; y < length1; y++) {
                                     danxuan1[y].index = y;
                                     danxuan1[y].onclick = function() {
                                    danxuan1[this.index].setAttribute("class","selected1");


                                         for (var u = 0; u < length1; u++) {

                                                danxuan1[u].className = "";



                                           };

          this.className = "selected1 ";
                                     }
                                 };
                                 function dizhi() {
                                   var bMap = api.require('bMap');
                                   bMap.getDistance({
                                       start: {
                                           lon: 117.017179,
                                           lat: 36.68695
                                       },
                                       end: {
                                           lon: 117.055021,
                                           lat: 36.683128
                                       }
                                   }, function(ret) {
                                       if (ret.status) {
                                           console.log(ret.distance);
                                       }
                                   });
api.openWin({
    name: 'map',
    url: 'map_win.html',


});



 }

 function yanzheng(){
   console.log($api.getStorage("shenfen"));
   if(!$api.getStorage("member")){
     api.toast({
         msg: '未登陆不可发布',
         duration: 2000,
         location: 'bottom'
     });
     $api.addCls($api.byId('input'),"none");

   }



   if($api.getStorage("shenfen")==2){
     //console.log(1111111111111);
     api.toast({
         msg: '您选择的是个人账号，无法发布项目',
         duration: 2000,
         location: 'bottom'
     });
     $api.addCls($api.byId('input'),"none");

   }else if($api.getStorage("shenfen")==3){
     api.toast({
         msg: '您选择的是店家账号，无法发布项目',
         duration: 2000,
         location: 'bottom'
     });
     $api.addCls($api.byId('input'),"none");

   }else if($api.getStorage("shenfen")==1){
     cishu();
     $api.removeCls($api.byId('input'),"none");
   }



 }


 function fabu(){

var shebei =   $api.attr($api.dom(".selected"),'title');
var jingyan =   $api.attr($api.dom(".selected1"),'title');
var counter = $api.text($api.byId("counter"));
var xmtype = $api.text($api.byId("xmtype"));
var xuqiu = $api.val($api.byId("xuqiu"));
var title = $api.val($api.byId("title"));

var dizhite = $api.text($api.byId("dizhite"));
console.log(title.length)

if(shebei !=null&&jingyan != null &&counter!=''&&xmtype!=''&&xuqiu!=''&&dizhite!=''&&title.length<20){

      api.ajax({
        url: $api.getStorage("backapi")+'/index.php?s=xiangmu&c=home&m=ajax_add&uid='+$api.getStorage("member")+"&sys="+$api.getStorage("sys"),
        method: 'post',
        data: {
            values: {
                shebei:shebei,
                jingyan:jingyan,
                counter:counter,
                xmtype:xmtype,
                xuqiu:xuqiu,
                dizhite:dizhite,
                title:title,
                lon:lon,
                lat:lat,
            },

        }
    },function(ret, err){
        if (ret) {
            api.toast({
                msg: '发布成功',
                duration: 2000,
                location: 'bottom'
            });
             location.reload() ;
            console.log( JSON.stringify( ret ) );
        } else {
            console.log( JSON.stringify( err ) );
        }
    });



}else{
  api.toast({
      msg: '标题输入过长或存在未填写项',
      duration: 2000,
      location: 'bottom'
  });

}



}

var cishu;
function cishu(){
  api.ajax({
      url:  $api.getStorage("backapi")+'/index.php?s=xiangmu&c=home&m=cha_ajax&uid='+$api.getStorage("member"),
      method: 'post',
  },function(ret, err){

      if (ret.status) {
        cishu = 5-Number(ret.status);

          api.toast({
              msg: "您还可发布"+cishu+"条",
              duration: 2000,
              location: 'bottom'
          });

          if(cishu<0){
             $api.addCls($api.byId('input'),"none");
          }else{
            $api.removeCls($api.byId('input'),"none");

          }
          //console.log( JSON.stringify( ret ) );
      } else {
          console.log( JSON.stringify( err ) );
      }
  });

}


    function djthis(data) {

        $api.css(  $api.byId('shebeiid'), 'display:block');

      var djly=$api.domAll(".jjly.dj")

            for (var b = 0; b < djly.length; b++) {

                if (data == b) {
                    $api.addCls(djly[b], 'checked');
                    $api.text($api.byId("dianjia"), $api.text(djly[b]));
                var  typetext= $api.text(djly[b])
        $api.text($api.byId("xmtype"),typetext)
                console.log(djly[b]);
                } else {
                    $api.removeCls(djly[b], 'checked');
                }
            }


    }
    function jjthis(data) {
      var jjly=$api.domAll(".jjly.jj")

            for (var b = 0; b < jjly.length; b++) {

                if (data == b) {
                    $api.addCls(jjly[b], 'checked');

                } else {
                    $api.removeCls(jjly[b], 'checked');
                }
            }
          $api.css($api.byId("dj"),'display:none')
    }
function type(){
      $api.css($api.byId("dj"),'display:block')
    }
    function disnone(){
        $api.css($api.byId("jjtc"),'display:none')
        $api.css($api.byId("dj"),'display:none')
    }


function ajax(){
    api.ajax({
        url: $api.getStorage("backapi")+'/index.php?c=home&m=cha_ajax&id='+$api.getStorage("member")+"&sys="+$api.getStorage("sys"),
        method: 'GET',
    },function(ret, err){
        if (ret.status) {
          $api.setStorage('shenfen',ret.status.identity);
          console.log(ret.status.identity);
            api.hideProgress();
            api.refreshHeaderLoadDone()

        } else {
              api.hideProgress();
            api.refreshHeaderLoadDone()
            api.toast({
                msg: '查询失败',
                duration: 2000,
                location: 'bottom'
            });


        }
        yanzheng()
        console.log(JSON.stringify(ret));
    });

}

  </script>
  </html>
